<template>
    <div class="changeinfocontainer">
    <el-form class="chaform" :model="form" label-width="auto">
        <div class="outavatar">
            <el-form-item label="">
                <el-upload title="点击修改头像" class="avatar-uploader" :action="uploadurl" :show-file-list="false"
                    :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                </el-upload>
            </el-form-item>
            <el-form-item class="nickname">
                <span style="margin-bottom: 6px;">昵称：</span>
                <el-input size="large" v-model="nickname" type="text"></el-input>
            </el-form-item>
        </div>
        <el-form-item  class="introduce">
            <span>个人简介</span>
            <el-input size="large" v-model="introduce" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width:100px;" @click="changeinfo">提交</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script setup>

import { ref, onMounted } from 'vue';
import { baseURL } from '@/baseurl'
import { getuserinfo,changeuserinfo } from '@/apis/user'
import { ElNotification } from 'element-plus';
import {toast} from '@/composables/utils'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/stores/user'



const uploadurl = ref('')
const imageUrl = ref('')
const upavatar = ref('')
const circleUrl = ref('')
const nickname = ref('')
const introduce = ref('')
const usersotre = useUserStore()
const router = useRouter()

// 提交按钮
function changeinfo() {
    if (upavatar.value =='' || nickname.value == '' || introduce.value == ''){
        toast('信息填写不完整！', 'error')
        return
    }
    console.log("头像地址",upavatar.value);
    changeuserinfo({
        avatar: upavatar.value,
        nickname: nickname.value,
        introduce: introduce.value
    }).then(res => {
        toast('修改成功！', 'success')
        usersotre.userInfo.avatar = upavatar.value
        usersotre.userInfo.nickname = nickname.value
        usersotre.userInfo.introduce = introduce.value
        router.replace('/')

    })
    
}




// 文件上传成功时触发
const handleAvatarSuccess = (response, uploadFile) => {
    console.log("头像上传成功！", response.imgurl);
    console.log("头像上传成功！", uploadFile.raw);
    upavatar.value = response.imgurl
    imageUrl.value = baseURL + response.imgurl
    console.log("拼接后的图片地址是：", imageUrl.value);
    // imageUrl.value = URL.createObjectURL(uploadFile.raw)
}


const beforeAvatarUpload = (file) => {
    uploadurl.value = baseURL + 'api/upavatar'
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        ElNotification({
            title: '错误',
            message: '上传头像图片只能是 JPG 格式!',
            type: 'error'
        });
    }
    if (!isLt2M) {
        ElNotification({
            title: '错误',
            message: '上传头像图片大小不能超过 2MB!',
            type: 'error'
        });
    }
    return isJPG && isLt2M;
};
onMounted(() => {
    getuserinfo().then(res => {
        console.log("获取个人信息成功", res);
        upavatar.value = res.data.avatar
        imageUrl.value = baseURL + res.data.avatar
        nickname.value = res.data.nickname
        introduce.value = res.data.introduce
    })
})

</script>
<style scoped>
.introduce{
    width: 100%;
}
.changeinfocontainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.nickname{
    margin-left: 20px;
    width:auto;
}
.chaform{
    height:400px;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
}
.outavatar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%;
}
</style>